<template>
    <div>
        <div>{{ dayjs(date).format('YYYY-MM-DD') }}</div>
        <div style="display: flex;">
            <button @click="selectDate('prev-year')">上一年</button>
            <button @click="selectDate('next-year')">下一年</button>
            <button @click="selectDate('prev-month')">上个月</button>
            <button @click="selectDate('next-month')">下个月</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th v-for="day in weekDays" :key="day">{{ day }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row,rid) in rows" :key="rid">
                    <td @click="handlePick(cell)"  :class="getCellClass(cell)" v-for="(cell,cid) in row" :key="cid"> {{ cell.text }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'
import { computed, ref } from 'vue';
import { calendarProps } from '.';
dayjs.locale('zh-cn')

const props = defineProps(calendarProps)
const now = dayjs()

const date = computed(() => {
    return props.modelValue ? dayjs(props.modelValue) : now
})
const firstDayOfWeek = dayjs().startOf('week').day() // 当前日期周几

const weekDays = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']


const rows = computed(() => {
    let list = []
    const firstDay = date.value.startOf('month').day() // 获取当前月第一天周几
    const lastDay = date.value.subtract(1, 'month').endOf('month').date() // 上个月最后一天日期
    console.log('lastDay', lastDay);
    const count = firstDay - firstDayOfWeek

    const preMonthDays = Array.from({ length: count })
        .map((_, idx) => lastDay - (count - idx - 1))
        .map(_ => ({
            text: _,
            type: 'prev'
        }))

    const days = date.value.daysInMonth() // 当前月天数

    const currentMonthDays = Array.from({ length: days }).map((_, idx) => ({
        text: idx + 1,
        type: 'current'
    }))
    console.log('preMonthDays', preMonthDays)
    list = [...preMonthDays,...currentMonthDays]

    let  nextLength = 42 - list.length

    const nextMonthDays = Array.from({length:nextLength}).map((_,idx)=>({
        text:idx+1,
        type:"next"
    }))
    list.push(...nextMonthDays)
    return Array.from({length:6}).map((_,idx)=>{
        const start = idx * 7
        return list.slice(start,start+7)
    })
})
console.log(rows.value)

const prevMonthDay = computed(()=>date.value.subtract(1,'month').date(1))
const nextMonthDay = computed(()=>date.value.add(1,'month').date(1))
const prevYearDay = computed(()=>date.value.subtract(1,'year').date(1))
const nextYearDay = computed(()=>date.value.add(1,'year').date(1))

const emit = defineEmits(['update:modelValue'])
const pickDay = (day) => {
    selectDay.value = day
emit('update:modelValue', dayjs(day).format('YYYY-MM-DD'))
}
const selectDate = (type) => {
    const dateMap = {
        'prev-month':prevMonthDay.value,
        'next-month':nextMonthDay.value,
        'prev-year':prevYearDay.value,
        'next-year':nextYearDay.value,
        today:now
    }
    const day = dateMap[type]
    pickDay(day)
}
const formatter = (text,type) => {
    switch (type) {
        case 'prev':
            return date.value.startOf('month').subtract(1,'month').date(text)
        case 'current':
            return date.value.date(text)
        case 'next':
            return date.value.startOf('month').add(1,'month').date(text)
    }
}

const selectDay = ref()
const handlePick = ({text,type}) => {
    let day = formatter(text,type)
    pickDay(day)
}

const getCellClass = ({type,text}) => {
    const clazz = [type]
    const date = formatter(text,type)
    if(date.isSame(selectDay.value,'day')){
        clazz.push('cell-active')
    }
    if(date.isSame(now,'day')){
        clazz.push('is-today')
    }
    return clazz
}
</script>
<style scoped>
td{
    width: 120px;
    height: 120px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}
.is-today{
    background-color: red;
}
.cell-active{
    background-color: yellow;
}
</style>